<template>
	<view class="">
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">修改个人信息</block>
		</cu-navbar>
		<view class="padding">
			<view class="cu-form-group">
				<view class="title">头像：</view>
				<view class="flex-sub padding-xs" @click="goUpload"><image :src="avatar" mode=""></image></view>
			</view>
			<view class="cu-form-group">
				<view class="title">昵称：</view>
				<input placeholder="请输入昵称" v-model="user.nickname" />
			</view>
			<radio-group class="block" @change="RadioChange">
				<view class="cu-form-group">
					<view class="title">性别：</view>
					<view class="flex gender">
						<view class="flex align-center">
							<radio color="#9c26b0" :checked="user.gender == '1' ? true : false" value="1"></radio>
							<text class="margin-left-xs">男</text>
						</view>
						<view class="margin-left flex align-center">
							<radio color="#9c26b0" :checked="user.gender == '2' ? true : false" value="2"></radio>
							<text class="margin-left-xs">女</text>
						</view>
					</view>
				</view>
			</radio-group>
			<view class="cu-form-group align-start">
				<view class="title">签名：</view>
				<textarea maxlength="-1" v-model="user.bio" placeholder="个性签名"></textarea>
			</view>
		</view>
		<view class="padding flex flex-direction"><button class="cu-btn bg-mauve margin-tb-sm lg" @click="save">提交</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			avatar:'',
			user: {
				avatar: '',
				nickname: '',
				gender: '',
				bio: ''
			}
		};
	},
	created() {
		this.user.avatar = this.vuex_user.avatar;
		this.avatar = this.vuex_user.avatar;
		this.user.nickname = this.vuex_user.nickname;
		this.user.gender = this.vuex_user.gender;
		this.user.bio = this.vuex_user.bio;
	},
	methods: {
		RadioChange(e) {
			this.user.gender = e.detail.value;
		},
		goUpload() {
			this.$common.chooseImg().then(res => {
				console.log(res);
				this.$api
					.upload({
						filePath: res[0],
						name:'file'
					})
					.then(res => {
						if(res.code){
							this.user.avatar = res.data.url;
							this.avatar = res.data.fullurl;
						}
					});
			});
		},
		save() {
			if (!this.user.avatar) {
				this.$common.errorToShow('请上传头像！');
				return;
			}
			if (!this.user.nickname) {
				this.$common.errorToShow('请输入昵称！');
				return;
			}
			if (!this.user.gender) {
				this.$common.errorToShow('请选择性别！');
				return;
			}
			if (!this.user.bio) {
				this.$common.errorToShow('请输入签名！');
				return;
			}
			this.$api.update_info(this.user).then(res => {
				this.$common.errorToShow(res.msg);
				if (res.code) {
					this.$vuex('vuex_user', res.data.userinfo);
				}
			});
		}
	}
};
</script>

<style lang="scss">
page{
	background-color: #f4f6f8;
}
.gender {
	width: 80%;
	justify-items: left;
}
.cu-form-group + .cu-form-group {
	border: none;
}
.cu-form-group {
	margin-top: 2rpx;
	image {
		width: 100rpx;
		height: 100rpx;
	}
}
</style>
